<template>
  <div class="main-nav">
    <div class="title">{{ collapseState ? 'CMS' : 'Coderwhy-CMS' }}</div>

    <!-- 折叠起来的时候，menus的宽度还是撑满的，但是里面的内容是折起来的 -->
    <div class="menus">
      <el-menu
        active-text-color="#fff"
        background-color="#001529"
        text-color="#b7bdc3"
        :default-active="defaultActiveID"
        :collapse="collapseState"
      >
        <el-sub-menu v-for="item in menuList" :key="item.id" :index="item.id">
          <template #title>
            <!-- item.icon的值为字符串el-icon-monitor类型，要将其转化为组件库支持的<Monitor /> 通过动态组件实现 -->
            <el-icon>
              <component :is="item.icon.split('-icon-')[1]"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="subItem in item.children"
            :key="subItem.id"
            :index="subItem.id"
            @click="handItemClick(subItem)"
            >{{ subItem.name }}</el-menu-item
          >
        </el-sub-menu>
      </el-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import useLoginStore from '@/store/login/login'
import { useRouter, useRoute } from 'vue-router'
import { firstMemu, mapRouteToMenus } from '@/utils/map-menus'
const loginStore = useLoginStore()
const menuList = loginStore.userMenus
console.log('菜单列表', menuList)

defineProps({
  collapseState: {
    type: Boolean,
    default: false,
  },
})

const router = useRouter()
function handItemClick(obj: any) {
  router.push({
    path: obj.route,
  })
}

// 可以取第一个菜单中的id作为默认激活项，但是有一个问题，如果我现在选了第二个menu，刷新页面的时候地址栏中展示的路径及页面都是第二个菜单的，但是菜单中选中的是一个，导致菜单和页面内容展示不一致
// 最好的办法是根据路由地址中的path来匹配，找到地址路径匹配的id
const route = useRoute()
const defaultActiveID = ref('')

// 监听路由的变化，更新激活菜单
watch(
  () => route.path,
  (newVal) => {
    const activeMenu = mapRouteToMenus(newVal, menuList)
    defaultActiveID.value = activeMenu.id
  },
  {
    immediate: true,
  },
)

// 设置第一个激活的组件：这样写是不对的，因为有的用户可能没有id为11的菜单
// onMounted(() => {
//   for (let i = 0; i < menuList.length; i++) {
//     const childrenList = menuList[i].children
//     for (let index = 0; index < childrenList.length; index++) {
//       if (childrenList[index].id === '11') {
//         router.push({
//           path: childrenList[index].route,
//         })
//       }
//     }
//   }
// })
</script>

<style scoped lang="less">
.main-nav {
  height: 100%;
  background-color: #001529;
  color: #fff;
  // 标题区域
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;

    white-space: nowrap; // 展开时，宽度不够但是不换行
  }
  // 菜单区域
  .menus {
    .el-menu {
      border-right: none;
      user-select: none;
      .el-sub-menu {
        .el-menu-item {
          padding-left: 50px !important;
          background-color: #0c2135;
        }
        .el-menu-item:hover {
          color: #fff;
        }
        .el-menu-item.is-active {
          background-color: #0a60bd;
        }
      }
    }
  }
}
</style>
